<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>

<div id="app">

    <div class="demo-input-size">

        <el-table
                :data="branchArr"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="bname"
                    label="部门名称"
                    width="400">
            </el-table-column>
            <el-table-column
                    prop="state.stname"
                    label="部门状态"
                    width="250">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button type="success"  size="small" @click="showUpdateDialog(scope.row.id)">更名</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改部门" :visible.sync="updateDialogFormVisible">
            <el-form :model="braInfo" :rules="rules"  ref="braInfo"  >
                <el-form-item label="部门名称"  prop="bname">
                    <el-input v-model="braInfo.bname" ></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="updateDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatebra()">修 改</el-button>
            </div>
        </el-dialog>

    </div>

</div>


<script>

    $.get("/ssm/branch/query",function (backData) {
        haha.branchArr=backData.data;
    });

    var haha=new Vue({
        el:"#app",
        data:{
            branchArr:[],
            updateDialogFormVisible:false,
            braInfo:{},
            rules:{
                bname: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' },
                ],
            }
        },
        methods:{

            updatebra(){
                $.post("/ssm/branch/update",haha.braInfo,function (backData) {
                    if (backData.code==1){
                        haha.updateDialogFormVisible=false;
                        haha.$refs["braInfo"].resetFields();
                        haha.$message.success('修改成功');
                        window.location.href="/ssm/branchcontrol/branchmain.html";
                    }else {
                        haha.$message.error('修改失败');
                    }
                });
            },
            showUpdateDialog(id){
                $.get("/ssm/branch/get/"+id,function (backData) {
                    haha.braInfo=backData.data;
                    haha.updateDialogFormVisible=true;
                });

            }
        }
    });




</script>

</body>
</html>